<template>
    <div class="login-container">
        <div class="login-form-wrap">
            <div class="header">
                <div ref="header-left" class="header-left" @click="routerEvent('header-left','header-right')">
                    <router-link tag="div" to="/login" >登陆</router-link>
                </div>
                <div ref="header-right" class="header-right" @click="routerEvent('header-right','header-left')">
                    <router-link tag="div" to="/register" >注册</router-link>
                </div>
            </div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import Login from "./Login";
    import Register from "./Register";
    export default {
        name: "Index",
        components:{
            Login,
            Register
        },
        mounted() {

        },

        methods:{
            routerEvent:function (refName,other) {
                this.$refs[refName].style.background="orangered";
                this.$refs[other].style.background="";
            }
        }
    }
</script>

<style scoped>
    a{
        text-decoration: none;
    }

    .login-container{
        /*占满整个屏幕*/
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("../../assets/static/img/bg.png") no-repeat;
        background-size: cover;
    }

    /*登录总的界面*/
    .login-form-wrap{
        position: relative;
        min-width: 300px;
        background: #efefef;
        padding: 60px 50px 10px;
        border-radius: 15px;
        overflow: hidden;
    }

    .login-container .login-form-wrap .header{
        display: flex;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
    }
    .login-container .login-form-wrap .header .header-left{
        cursor: pointer;
        width: 50%;
        height: 100%;
        text-align: center;
        line-height: 40px;
        border-bottom-right-radius:15px;
    }

    .login-container .login-form-wrap .header .header-right{
        cursor: pointer;
        width: 50%;
        height: 100%;
        line-height: 40px;
        border-bottom-left-radius:15px;
    }

</style>